<template>
  <div style>
    <Modal
      v-model="show"
      :title="getTitleName()"
      :mask-closable="false"
      :closable="false"
      :width="720"
    >
      <div style="font-size:15px;">
        <Row>
          <Col :span="5">选择分配条数</Col>
          <Col>
            <Input
              :maxlength="3"
              v-model="inputForm.inputCount"
              placeholder="请输入分配条数，最高600条"
              style="width: 200px"
              size="small"
            />
          </Col>
        </Row>
        <Row style="margin-top:10px;">
          <Col :span="5">可分配条数</Col>
          <Col>
            <span style="color:#ed4014;">{{assigneRes.count}}</span>
            <span style="margin-left:4px;">条</span>
          </Col>
        </Row>
        <Row style="margin-top:10px;">
          <Col :span="5">快捷选择</Col>
          <Col>
            <RadioGroup
              v-model="inputForm.inputCount"
              type="button"
              size="small"
              :on-change="selectQuickly()"
            >
              <Radio :label="c" v-for=" c in quicklyCount" :key="c" style="margin-right:4px;"></Radio>
            </RadioGroup>
          </Col>
        </Row>
      </div>
      <div style="margin-top:10px;font-size:13px;">
        <template>
          <Transfer
            :list-style="listStyle"
            :data="data2"
            :titles="['可分配','已选择']"
            :target-keys="targetKeys1"
            filterable
            :render-format="render1"
            @on-change="handleChange1"
            @on-selected-change	="selectChange"
            class="t1"
          ></Transfer>

          <Transfer
            :list-style="listStyle"
            :data="data2"
            :titles="['可分配','已选择']"
            :target-keys="targetKeys2"
            filterable
            :render-format="render1"
            @on-change="handleChange1"
            class="t2"
          ></Transfer>
        </template>
      </div>
      <div slot="footer">
        <Button type="default" @click="cancel(false)">取消</Button>
        <Button type="primary" :disabled="!checkAssigneDisabled()" @click="saveAssigne">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<style>
.ivu-transfer-list-content li {
  float: left;
  clear: none;
  width: 110px;
  height: 35px;
  margin-right: 0px;
  padding-right: 8px;
  padding-left: 14px;
}
.ivu-transfer-operation button {
  float: left;
}
.ivu-transfer-operation .ivu-btn:first-child {
  margin-bottom: 0px;
}
.ivu-transfer-operation .ivu-btn {
  margin: 12px 0px;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* Internet Explorer */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
}
.ivu-transfer-operation {
  margin-left: 50%;
  transform: translateX(-50%);
  display: none;
}
.t1 .ivu-transfer-list:nth-child(3),
.t2 .ivu-transfer-list:nth-child(1)
{
    display: none;
}
.t2{
  margin-top: 10px;
}
</style>
<script>
import { post } from "@/libs/axios-cfg";
export default {
  data() {
    return {
      show: true,
      maxCount: 0,
      inputForm: {
        inputCount: null,
        quicklySelectCount: 0
      },

      quicklyCount: [100, 200, 300, 400, 500, 600],
      data2: [],
      targetKeys1: [],
      targetKeys2:[],
      listStyle: {
        width: "100%",
        height: "250px"
      }
    };
  },
  props: {
    group: {
      type: Object,
      default: {}
    },
    assigneRes: {
      type: Object,
      default: {}
    }
  },
  methods: {
    getTitleName() {
      return "分配线索:" + this.group.groupName;
    },
    /**
     * @description 关闭Modal
     * @param reload 是否重新加载数据
     */
    cancel(reload = false) {
      this.$emit("cancel", { name: "assigneModalFlag", refresh: true });
    },
    selectQuickly(data) {
      // this.inputForm.inputCount= this.inputForm.quicklySelectCount;
    },
    render1(item) {
      return item.label;
    },
    handleChange1(newTargetKeys, direction, moveKeys) {
      this.targetKeys1 = newTargetKeys;
    },
    selectChange(newTargetKeys, moveKeys){
        if(moveKeys&&moveKeys.length>0){
        }else{
          this.targetKeys2 = newTargetKeys;
        }
       
    },
    saveAssigne() {
      var url = "/clue/assigne";
      var ps = {
        ids: this.targetKeys2,
        count: this.inputForm.inputCount+"",
        groupId: this.group.id
      };

      this.post(url, ps, {}).then(res => {
        if (this.checkIsSsuccess(res)) {
          var data = res.data;
          this.assigneRes.count = this.assigneRes.count - data.successCount;
          this.$Message.success({
            content: "分配成功",
            duration: 1,
            closable: true,
            onClose: () => this.cancel()
          });
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 2,
            closable: true,
            onClose: () => this.cancel()
          });
        }
      });
    },
    checkAssigneDisabled() {
      //可分配条数小于0
      if (this.assigneRes.count <= 0) {
        return false;
      }
      //选择分配坐席数<0
      if (!this.targetKeys2 || this.targetKeys2.length <= 0) {
        return false;
      }
      //输入分配的条数<0
      if (!this.inputForm.inputCount || this.inputForm.inputCount <= 0) {
        return false;
      }

      //输入分配的条数大于600
      if (this.inputForm.inputCount > 600) {
        return false;
      }

      //选择分配条数大于可分配条数
      if (this.inputForm.inputCount * this.targetKeys2.length >this.assigneRes.count) {
        // if(this.inputForm.inputCount*1>this.assigneRes.count){
        return false;
      }
      return true;
    }
  },
  created() {
    this.data2 = [];
    this.assigneRes.assigneTos.forEach(element => {
      this.data2.push({ key: element.value, label: element.label });
    });
  }
};
</script>

